/**
 * Created by root on 2017/1/12.
 */
/**
 * 箭头
 * @example
 * <ReplyDialogueList
 *    ReplyDialogueList = [
 *     {
        userName: '胡崇崇',                              
        content: '轻任务',  
        userId: 'hucc@hh',                       
        time: '1300000000000000000',
        isContext: true,
        isOwn: false,
        contextlenght：6,
       }
 *    ]
 *    />
 */
import {
  connect
} from 'react-redux';
import React, { Component, PropTypes } from 'react';
import { GxIcon, Utility } from 'components';
import * as CommonActions from 'redux/modules/reduxCommon';
@connect(
  state => ({
    Title: state.Common.Title,                                          // 标题
    UrlParams: state.Common.UrlParams,                                 // URL参数
    replyList: state.TaskManager.replyList,
  }), { ...CommonActions })

export default class ReplyDialogueList extends Component {
  static propTypes = {
    replyDialogueList: PropTypes.array,
    IsShowLoadingComplete: PropTypes.bool,
    contextList: PropTypes.array,
    UrlParams: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      lastView: null  //  
    };
  }
  componentDidMount() {
    const contentDiv = this.refs.contentDiv;
    if (contentDiv) {
      contentDiv.scrollTop = contentDiv.scrollHeight;
    }
  }
  componentWillReceiveProps() {
    this.state.lastView = null;
  }
  componentDidUpdate() {
    const contentDiv = this.refs.contentDiv;
    if (contentDiv) {
      contentDiv.scrollTop = contentDiv.scrollHeight;
    }
  }
  __itemClick(obj) {
    if (obj && obj.onItemClick && Utility.isFunction(obj.onItemClick)) {
      obj.onItemClick();
    }
  }

  __getTimeView(styles, obj) {
    const lastView = this.state.lastView;
    if (!lastView) {
      return (
        <div className={styles.tips} >
          {obj.createTime ? Utility.$convertToDateByTimestamp(obj.createTime, 'HH:mm') : ''}
        </div>
      );
    }else if (lastView.createTime - obj.createTime >= 60000) {
      return (
        <div className={styles.tips} >
          {obj.createTime ? Utility.$convertToDateByTimestamp(obj.createTime, 'HH:mm') : ''}
        </div>
      );
    }
    return '';
  }
  __getTipsView(styles, tips) {
    return (
      <div className={styles.tips} >
        {tips}
      </div>
    );
  }
  __getOthers(styles, obj, index) {
    this.state.lastView = obj;
    return (
      <div className={styles.item} key={index}>
        <div className={styles.headIcon}>
          <GxIcon IconType="headIcon35" />
        </div>
        <div className={styles.repley}>
          <div className={styles.replyName}> {obj.taskUserName ? obj.taskUserName : ''}</div>
          <div className={styles.replyContent}>
            {obj.content ? obj.content : ''}
          </div>
        </div>
      </div>
    );
  }
  __getOwns(styles, obj, index) {
    this.state.lastView = obj;
    return (
      <div className={styles.itemOwns} key={index}>
        <div className={styles.repley}>
          <div className={styles.replyContent}>
            {obj.content ? obj.content : ''}
          </div>
        </div>
        <div className={styles.headIcon}>
          <GxIcon IconType="headIcon35" />
        </div>
      </div>
    );
  }

  __getOtherItem(styles, obj, index) {
    const contextList = this.props.contextList || [];
    return (
      <div className={styles.div}>
        {this.__getTimeView(styles, obj)}
        {this.__getOthers(styles, obj, index)}
        {contextList.length - 1 === index ? this.__getTipsView(styles, '以上是任务相关信息') : ''}
      </div>
    );
  }
  __getOwnItem(styles, obj, index) {
    const contextList = this.props.contextList || [];
    return (
      <div className={styles.div}>
        {this.__getTimeView(styles, obj)}
        {this.__getOwns(styles, obj, index)}
        {contextList.length - 1 === index ? this.__getTipsView(styles, '以上是任务相关信息') : ''}
      </div>
    );
  }
  __GetArticalList(styles) {
    let dataeArr = [];
    const { replyDialogueList, contextList } = this.props;
    if (contextList) {
      dataeArr = contextList;
    }
    if (replyDialogueList) {
      dataeArr = dataeArr.concat(replyDialogueList);
    }
    console.info('qqqqqqqq', dataeArr);
    const {
      UrlParams
    } = this.props;
    const userId = UrlParams.userId;
    const _items = dataeArr.map((obj, index) => {
      return userId === obj.taskUser ? this.__getOwnItem(styles, obj, index) : this.__getOtherItem(styles, obj, index);
    });
    return _items;
  }
  render() {
    const styles = require('./scss/ReplyDialogueList.scss');
    // const { IsShowLoadingComplete } = this.props;
    const { replyDialogueList, contextList } = this.props;
    let show = false;
    if (replyDialogueList || contextList) {
      show = true;
    }
    return (
      <div>
        <div className={show ? styles.content : ''} ref="contentDiv">
          {this.__GetArticalList(styles)}
        </div>
      </div>
    );
  }
}
